<template>
  <div class="art">
    <!-- 顶部导航 -->
    <div class="art-nav">
      <t-navbar
        title="文章资讯"
        :fixed="false"
        left-arrow
        @left-click="handleClick"
      />
    </div>
    <!-- 内容 -->
    <div class="search-page">
      <div class="filter-bar">
        <button
          v-for="category in categories"
          :key="category"
          :class="['filter-button', { active: selectedCategory === category }]"
          @click="selectCategory(category)"
        >
          {{ category }}
        </button>
      </div>
      <div class="search-bar">
        <input
          type="text"
          v-model="searchQuery"
          placeholder="请输入关键词，如送女友..."
        />
        <button class="search-button">搜索</button>
      </div>
      <div class="card-list">
        <div
          v-for="item in filteredItems"
          :key="item.title"
          class="card"
          @click="$router.push(item.path)"
        >
          <h3>{{ item.title }}</h3>
          <p>{{ item.content }}</p>
          <p>{{ item.title }}</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import "./arti.css";
import { ref, computed } from "vue";

const categories = ref(["全部", "情侣", "送礼", "鲜花"]);
const selectedCategory = ref("全部");
const searchQuery = ref("");

const items = ref([
  {
    title: "向日葵的花语",
    content:
      "向日葵的花语是忠诚、沉默的爱。因为向日葵是太阳虔诚的追随者，每天随着太阳运行的方向转动，把自己一生所有的热爱都献给了太阳，但是又从来都不会说出口，所以向日葵...",
    category: "情侣",
    path: "/sun",
  },
  {
    title: "绿萝的养殖方法和注意事项",
    content:
      "向日葵的花语是忠诚、沉默的爱。因为向日葵是太阳虔诚的追随者，每天随着太阳运行的方向转动，把自己一生所有的热爱都献给了太阳，但是又从来都不会说出口，所以向日葵...",
    category: "鲜花",
  },
  {
    title: "19朵玫瑰代表什么？",
    content:
      "向日葵的花语是忠诚、沉默的爱。因为向日葵是太阳虔诚的追随者，每天随着太阳运行的方向转动，把自己一生所有的热爱都献给了太阳，但是又从来都不会说出口，所以向日葵...",
    category: "送礼",
  },
  {
    title: "粉玫瑰的花语是什么？",
    content:
      "向日葵的花语是忠诚、沉默的爱。因为向日葵是太阳虔诚的追随者，每天随着太阳运行的方向转动，把自己一生所有的热爱都献给了太阳，但是又从来都不会说出口，所以向日葵...",
    category: "情侣",
  },
  {
    title: "绣球花花语",
    content:
      "向日葵的花语是忠诚、沉默的爱。因为向日葵是太阳虔诚的追随者，每天随着太阳运行的方向转动，把自己一生所有的热爱都献给了太阳，但是又从来都不会说出口，所以向日葵...",
    category: "情侣",
  },
]);

const filteredItems = computed(() => {
  return items.value.filter((item) => {
    const matchesCategory =
      selectedCategory.value === "全部" ||
      item.category === selectedCategory.value;
    const matchesQuery =
      item.title.includes(searchQuery.value) ||
      item.content.includes(searchQuery.value);
    return matchesCategory && matchesQuery;
  });
});

function selectCategory(category) {
  selectedCategory.value = category;
}
const handleClick = () => {
  console.log("left click");
  window.history.back();
};
</script>
<style lang="scss" scoped></style>
